/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  Component,
  PropTypes
} from 'react';
import {render} from '../renderer';
import {Enhance as FormItem} from './form-item';
import * as omit from 'lodash/omit';
import * as cx from 'classnames';
import * as assign from 'lodash/assign';

@FormItem({
  test:((path, config) => {
    return /(?:^|\/)form-item$/.test(path) && /^static-(?:text|plain|json|date|datetime|time|date-range|html|tpl|map|image|pic|picture|progress|status)$/.test(config.type);
  }),
  attachForm: false
})
export default class FormField extends Component {
  static propTypes = {
    inputClassName: PropTypes.string,
    type:PropTypes.string
  };

  static defaultProps = {
    value: '',
    placeholder: '-'
  };

  renderField(value) {
    let {
      type,
      $path,
      data
    } = this.props;

    type = type.substr(7);

    let props = omit(this.props, ['type', 'label' ,'$path', 'inputClassName', 'value', 'className']);

    return render(`${$path}/field`, assign(props, {
      type
    }), {
      disabled: true,
      item: data,
      data,
      value
    });

  }

  render() {
    let {
      placeholder,
      inputClassName,
      value
    } = this.props;

    return (
      <div
        className={cx('form-control-static', inputClassName)}
        key="input"
      >
        {typeof value === 'number' || value ? this.renderField(value) : (placeholder ? <span className="text-muted">{placeholder}</span> : '')}
      </div>
    );
  }
}
